<template>
    <el-menu
        :default-active="activeIndex"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="!collapse"
        unique-opened
        router
    >
        <div v-show="!collapse" class="headImg flex-row ite-c jus-c">
            <el-avatar :src="user.image_url"></el-avatar>
        </div>

        <el-menu-item @click="goIndex" v-show="collapse">
            <span class="logoTxt">博客后台管理</span>
        </el-menu-item>

        <template v-for="item in adminMenu">
            <template  v-if="item.parent_id === null && item.children.length>0">
                <el-submenu :index="item.url">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{ item.title }}</span>
                    </template>
                        <el-menu-item
                            v-for="cItem in item.children"
                            :index="cItem.url"
                        >{{ cItem.title }}</el-menu-item>
                </el-submenu>
            </template>

            <template v-else>
                <el-menu-item :index="item.url">
                    <i :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </template>
        </template>

    </el-menu>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: "navMenu",
        props:{
            collapse:{
                type:Boolean,
                required:false,
                default:true
            }
        },
        data() {
            return {
                activeIndex: '',
            }
        },
        watch: {
            $route() {
                this.activeCheck()
            }
        },
        computed: {
            // 获取用户数据
            ...mapGetters({
                user: 'user/getUser',
                adminMenu: 'user/getMenu',
            }),
        },
        methods: {
            activeCheck() {
                this.activeIndex = this.$route.path
            },
            goIndex(){
                this.$router.push('/')
            },

        }
    }
</script>

<style scoped lang="less">
    .logoTxt{
        color:#409EFF;
        font-weight: 700;
    }

    .headImg{
        width: 64px;
        height: 64px;
    }
</style>
